// import { createBox } from 'ol/interaction/Draw';
// import { createRegularPolygon } from 'ol/interaction/Draw';
import Draw from 'ol/interaction/Draw';
import sourceVector from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';
import { getArea, getLength } from 'ol/sphere';

var olsourceVector = new sourceVector();
var vector = new VectorLayer({
    source: olsourceVector,
});
var drawClassPolygon = new Draw({
    source: olsourceVector,
    type: 'Polygon', // 四种绘制：Point：点 LineString：线 Polygon：面 Circle：圆
    style: new Style({
        fill: new Fill({
            color: 'rgba(255,255,255,0.2)'
        }),
        stroke: new Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new Circle({
            radius: 7,
            fill: new Fill({
                color: '#ffcc33'
            })
        })
    })
})

drawClassPolygon.on('drawend', function(res) {
    var feature = res.feature
    var poly = feature.getGeometry()
    var coordinates = poly.getCoordinates()
    var area = getArea(poly, {
        projection: 'EPSG:4326'
    });
    var unit = 'm²'
        // if (area > 1000000) {
        //     area = area / 1000000;
        //     unit = 'km²';
        // }
    console.log(coordinates)
    console.log("面积：" + area + unit)
})

var drawClassLineString = new Draw({
    source: olsourceVector,
    type: 'LineString', // 四种绘制：Point：点 LineString：线 Polygon：面 Circle：圆
    style: new Style({
        fill: new Fill({
            color: 'rgba(255,255,255,0.2)'
        }),
        stroke: new Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new Circle({
            radius: 7,
            fill: new Fill({
                color: '#ffcc33'
            })
        })
    })
})

drawClassLineString.on('drawend', function(res) {
    var feature = res.feature
    var line = feature.getGeometry()
    var coordinates = line.getCoordinates()
    var length = getLength(line, {
        projection: 'EPSG:4326'
    });
    var unit = 'm'
        // if (length > 1000000) {
        //     length = length / 1000000;
        //     unit = 'km';
        // }
    console.log(coordinates)
    console.log("长度：" + length + unit)
})

var draw = {
    vector: vector,
    drawClassPolygon: drawClassPolygon,
    drawClassLineString: drawClassLineString
}

export default draw